let currentIndex = 0;
const image = document.querySelector('.carousel-image');
const dots = document.querySelectorAll('.dot');
const interval = 2000; // 3 seconds  
let carouselInterval;



function showSlide(index) {
    let suffix = ".jpg";
    image.src = index + suffix;
    dots.forEach((dot, i) => {
        dot.classList.toggle('active-dot', i === index);
    });
    currentIndex = index;
}

function nextSlide() {
    currentIndex = (currentIndex + 1) % dots.length;
    showSlide(currentIndex);
}

function prevSlide() {
    currentIndex = (currentIndex - 1 + dots.length) % dots.length;
    showSlide(currentIndex);
}

function startCarousel() {
    carouselInterval = setInterval(nextSlide, interval);
}

function stopCarousel() {
    clearInterval(carouselInterval);
    console.log("loc");
}

showSlide(currentIndex);
startCarousel();
const carouselImages = document.querySelector('.carousel-images');
const carouselDots = document.querySelector('.carousel-dots');
carouselImages.addEventListener('mouseover', stopCarousel);
carouselImages.addEventListener('mouseout', startCarousel);
dots.forEach(dot => {
    dot.addEventListener('click', function () {
        const index = Array.prototype.indexOf.call(dots, dot);
        showSlide(index);
    });

});